<style scoped>
.home {
  width: 1121px;
}

.title {
  font-size: 32px;
  color: #000;
  font-weight: 600;
  margin-bottom: 24px;
}

.data-box {
  display: flex;
}

.data-item {
  height: 160px;
  width: calc(25% - 15px);
  margin-right: 20px;
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-sizing: border-box;
}

.label {
  color: #1d2129;
  font-size: 16px;
}

.num {
  margin-top: 12px;
  font-size: 40px;
  margin-bottom: 16px;
  line-height: 52px;
}

.bi {
  display: flex;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
}

.bi div {
  display: flex;
  align-items: center;
  color: #e01d3e;
}

.bi div img {
  margin: 0 5px 0 15px;
}
.chart-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.chart-item {
  width: calc(50% - 10px);
  background-color: #fff;
  border-radius: 8px;
}
.search {
  display: flex;
  padding: 24px;
  font-size: 24px;
  color: #000;
  font-weight: 600;
  justify-content: space-between;
}
.chart {
  width: 100%;
  height: 300px;
}
</style>

<template>
  <div class="home">
    <div class="title">歷史統計</div>
    <div class="data-box" v-if="totalData.memberUserStatistics">
      <div class="data-item">
        <div class="label">付費訂閱</div>
        <div class="num">
          {{ totalData.memberUserStatistics.current_week_total }}
        </div>
        <div class="bi">
          比上星期
          <div>
            <img src="../../assets/down.png" />
            {{ totalData.memberUserStatistics.upgrade }}%
          </div>
        </div>
      </div>
      <div class="data-item">
        <div class="label">免費用戶</div>
        <div class="num">
          {{ totalData.freeUserStatistics.current_week_total }}
        </div>
        <div class="bi">
          比上星期
          <div>
            <img src="../../assets/down.png" />
            {{ totalData.freeUserStatistics.upgrade }}%
          </div>
        </div>
      </div>
    </div>
    <div class="chart-box">
      <div class="chart-item">
        <div class="search">
          <div class="search-label">活躍用戶</div>
        </div>
        <div class="chart" id="chart1"></div>
      </div>
      <div class="chart-item" v-show="false">
        <div class="search">
          <div class="search-label">推薦用戶</div>
          <el-select
            v-model="chart1Day"
            placeholder="Select"
            size="large"
            style="width: 202px"
          >
            <el-option
              v-for="item in dayList"
              :key="item"
              :label="`Last ${item} days`"
              :value="item"
            />
          </el-select>
        </div>
        <div class="chart" id="chart2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import VChart from "@visactor/vchart"; //文档https://visactor.com/vchart/guide/tutorial_docs/Getting_Started

export default {
  name: "home",
  data() {
    return {
      chart1Day: 7,
      chart2Day: 7,
      dayList: [7, 30, 90],
      chart1Data: [
        {
          month: "Monday",
          sales: 22,
        },
        {
          month: "Tuesday",
          sales: 13,
        },
        {
          month: "Wednesday",
          sales: 25,
        },
        {
          month: "Thursday",
          sales: 29,
        },
        {
          month: "Friday",
          sales: 38,
        },
      ],
      chart2Data: [],
      totalData: {},
    };
  },
  created() {
    this.$nextTick(() => {
      this.getWeekStatistic();
      this.getUserStatistic();
    });
  },
  methods: {
    initChart(id, data) {
      const spec = {
        data: [
          {
            id: "barData",
            values: data,
          },
        ],
        type: "bar",
        xField: "statisticsDate",
        yField: "userCount",
      };
      const vchart = new VChart(spec, { dom: id });
      vchart.renderSync();
    },
    async getWeekStatistic() {
      const res = await request.GET("/sys/statistics/data", {});
      if (res.status == 100100) {
        this.totalData = res.data;
      }
    },
    async getUserStatistic() {
      const res = await request.GET("/sys/statistics/active-user", {});
      if (res.status == 100100) {
        this.chart1Data = res.data;
        this.initChart("chart1", this.chart1Data);
      }
    },
  },
};
</script>
